<template>
    <div class="animated fadeIn">
        <Row>
            <i-col :sm="24" :md="12">
                <h5 class="title">到发列车数量统计</h5>
            </i-col>
            <i-col :sm="24" :md="12"><p style="text-align: right;color: #aaa;">数据统计截止时间：{{dateTime}}</p></i-col>
            <div class="statistics_list">
                <div class="statistics">
                    <div class="title">今日发出数量(列)</div>
                    <div class="value">{{getBoardDataList.sendTrainNumToday}}</div>
                    <div class="rose"><span :class="getBoardDataList.sendTrainNumDiffValue<0?'down':'up'"></span><span :class="getBoardDataList.sendTrainNumDiffValue<0?'num_red':'num_green'">{{Math.abs(getBoardDataList.sendTrainNumDiffValue)}}</span> <span style="color: #AAAAAA;">较昨日</span></div>
                </div>

                <div class="statistics">
                    <div class="title">今日到达数量(列)</div>
                    <div class="value">{{getBoardDataList.arriveTrainNumToday}}</div>
                    <div class="rose"><span :class="getBoardDataList.arriveTrainNumDiffValue<0?'down':'up'"></span><span :class="getBoardDataList.arriveTrainNumDiffValue<0?'num_red':'num_green'">{{Math.abs(getBoardDataList.arriveTrainNumDiffValue)}}</span> <span style="color: #AAAAAA;">较昨日</span></div>
                </div>

            </div>

            <i-col :sm="24" :md="24">
                <h5 class="title">到发货物量统计</h5>
            </i-col>
            <div class="statistics_list">
                    <div class="statistics">
                        <div class="title">今日发送量(万吨)</div>
                        <div class="value">{{getBoardDataList.sendProductWeightToday}}</div>
                        <div class="rose"><span :class="getBoardDataList.sendProductWeightDiffValue<0?'down':'up'"></span><span :class="getBoardDataList.sendProductWeightDiffValue<0?'num_red':'num_green'">{{Math.abs(getBoardDataList.sendProductWeightDiffValue)}}</span> <span style="color: #AAAAAA;">较昨日</span></div>
                    </div>
                    <div class="statistics">
                        <div class="title">今日到达量(万吨)</div>
                        <div class="value">{{getBoardDataList.getProductWeightToday}}</div>
                        <div class="rose"><span :class="getBoardDataList.getProductWeightDiffValue<0?'down':'up'"></span><span :class="getBoardDataList.getProductWeightDiffValue<0?'num_red':'num_green'">{{Math.abs(getBoardDataList.getProductWeightDiffValue)}}</span> <span style="color: #AAAAAA;">较昨日</span></div>
                    </div>
            </div>
        </Row>

    </div>
</template>
<script>
  import {getBoardData2} from '@api/backEnd/mainOrder'
  import moment from 'moment'

  export default {
    name: 'index',
    data () {
      let dateTime = moment().format('YYYY-MM-DD H:mm:ss ')
      let showTitle1 = false
      let showTitle2 = false
      let showTitle3 = false
      let showTitle4 = false
      let value1 = 0
      let value2 = 0
      let value3 = 0
      let truckCount = ''
      let driverCount = ''
      let speed = 10000
      let transportationList = ''
      let distributionList = ''
      let waitingTrainList = ''
      let orderDoneList = ''
      let getBoardDataList = {
        noReadMsg: '',
        orderStatus1: '',
        orderStatus2: '',
        orderStatus3: '',
        orderStatus4: '',
        orderStatus5: '',
        orderStatus6: '',
        driverNum: '',
        truckNum: '',
        fleetNum: '',
        sendTrainNum: '',
        sendProductWeight: '',
        sendContainerNum: '',
        getTrainNum: '',
        getProductWeight: '',
        getContainerNum: '',
        bindHeavyContainerNum: '',
        bindEmptyContainerNum: '',
        mineContainerNum: ''
      }
      let datas = {
        dateTime,
        showTitle1,
        showTitle2,
        showTitle3,
        showTitle4,
        value1,
        value2,
        value3,
        truckCount,
        driverCount,
        speed,
        transportationList,
        distributionList,
        waitingTrainList,
        orderDoneList,
        getBoardDataList
      }
      return datas
    },
    computed: {},
    methods: {},
    mounted () {
      // this.$Notice.success({
      //   title: '欢迎使用联运e达',
      //   duration: 3
      // })
      getBoardData2().then(res => {
        if (res.data.isSuccess === 1) {
          this.getBoardDataList = res.data.data.counts// Object.assign(this.getBoardDataList, res.data.data.counts)
          if (this.getBoardDataList.sendTrainNumToday === undefined || this.getBoardDataList.sendTrainNumToday === null) {
            this.getBoardDataList.sendTrainNumToday = 0
          }
          if (this.getBoardDataList.sendTrainNumDiffValue === undefined || this.getBoardDataList.sendTrainNumDiffValue === null) {
            this.getBoardDataList.sendTrainNumDiffValue = 0
          }
          if (this.getBoardDataList.arriveTrainNumToday === undefined || this.getBoardDataList.arriveTrainNumToday === null) {
            this.getBoardDataList.arriveTrainNumToday = 0
          }
          if (this.getBoardDataList.arriveTrainNumDiffValue === undefined || this.getBoardDataList.arriveTrainNumDiffValue === null) {
            this.getBoardDataList.arriveTrainNumDiffValue = 0
          }
          if (this.getBoardDataList.sendProductWeightToday === undefined || this.getBoardDataList.sendProductWeightToday === null) {
            this.getBoardDataList.sendProductWeightToday = 0
          }
          if (this.getBoardDataList.sendProductWeightDiffValue === undefined || this.getBoardDataList.sendProductWeightDiffValue === null) {
            this.getBoardDataList.sendProductWeightDiffValue = 0
          }
          if (this.getBoardDataList.getProductWeightToday === undefined || this.getBoardDataList.getProductWeightToday === null) {
            this.getBoardDataList.getProductWeightToday = 0
          }
          if (this.getBoardDataList.getProductWeightDiffValue === undefined || this.getBoardDataList.getProductWeightDiffValue === null) {
            this.getBoardDataList.getProductWeightDiffValue = 0
          }
        }
      })
    },
    components: {}
  }
</script>
<style type="text/css" scoped>
    .state-overview {
        color: #fff
    }

    .state-overview .ivu-col {
        margin-bottom: 20px
    }

    .state-overview .state-value .value {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 5px
    }

    .state-overview .state-value .title {
        font-size: 14px
    }

    .state-value {
        width: 60%;
        display: inline-block
    }

    .symbol {
        width: 35%;
        display: inline-block
    }

    .state-overview .panel {
        border-radius: 4px;
        padding: 25px 20px
    }

    .panel.purple {
        background: #6a8abe;
        box-shadow: 0 5px 0 #5f7cab
    }

    .panel.red {
        background-color: #fc8675;
        box-shadow: 0 5px 0 #e27869
    }

    .panel.blue {
        background: #5ab6df;
        box-shadow: 0 5px 0 #51a3c8
    }

    .panel.green {
        background: #4acacb;
        box-shadow: 0 5px 0 #42b5b6
    }

    .dash_income_chart {
        float: left
    }

    .ivu-row {
        margin-bottom: 20px !important
    }

    .dash_income {
        border-radius: 4px;
        background-color: #fff;
        height: 80px;
        padding: 15px
    }

    .staff_name {
        font-weight: 900;
        font-size: 16px
    }

    .staff_progress {
        margin-left: 10px;
        width: 90%
    }

    .staff_progress p {
        margin: 0
    }

    .staff_list {
        border-radius: 4px;
        margin-top: 0;
        height: 90px;
        display: flex;
        align-items: center
    }

    .animated {
        background-color: #eff0f4
    }

    li {
        margin-bottom: 11px;
        margin-left: 10px;
        margin-right: 10px
    }

    .num {
        font-weight: 700
    }

    .time {
        font-size: 14px;
        font-weight: 700
    }

    .content {
        padding-left: 5px
    }

    .dashboard_feature {
        text-align: center
    }

    .demo-carousel {
        height: 600px;
        line-height: 200px;
        text-align: center;
        color: #fff;
        font-size: 20px;
        background: #506b9e
    }

    .demo-carousel img {
        height: 100%;
        width: 100%
    }

    h3,
    h4,
    h5 {
        margin: 12px
    }

    h3 {
        margin-bottom: 20px
    }

    p {
        margin: 12px
    }

    .row-margin-top {
        margin-top: 30px
    }

    .state-info {
        position: absolute;
        right: 15px;
        top: 20px;
        margin-bottom: 30px
    }

    .state-info .panel {
        margin-bottom: 20px;
        float: right;
        margin-left: 15px
    }

    .panel {
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
    }

    .panel-body {
        padding: 15px
    }

    .state-info .panel .summary {
        float: left;
        margin-right: 20px
    }

    .state-info .panel .summary span {
        color: #49586e;
        font-size: 13px;
        font-weight: 400;
        text-transform: uppercase;
        margin-bottom: 10px
    }

    .state-info .panel .summary h3.red-txt {
        color: #fc8675
    }

    .state-info .panel .summary h3.green-txt {
        color: #65cea7
    }

    .state-info .panel .summary h3 {
        font-size: 200%;
        font-weight: 700;
        line-height: 20px;
        margin: 0
    }

    .page-heading h3 {
        color: #49586e;
        font-size: 25px;
        font-size: 11%;
        font-weight: 400;
        margin: 10px 0
    }

    .chart-bar {
        float: right;
        margin-top: 5px
    }

    .chart-bar img {
        display: inline-block;
        width: 68px;
        height: 45px;
        vertical-align: top
    }

    @media screen and (max-width: 767px) {
        .state-info {
            position: static;
            width: 100%;
            margin-top: 15px
        }

        .state-info .panel {
            width: 100%
        }
    }

    .panel.blue-box {
        background: none repeat scroll 0 0 #5ab5de;
        box-shadow: 0 5px 0 #51a3c7;
        color: #fff
    }

    .twt-info h3 {
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        font-weight: 900;
        margin: 10px 0 30px 0;
        text-align: center
    }

    .twt-info p {
        font-size: 18px;
        line-height: 25px;
        font-style: italic;
        margin: 0 0 20px 0;
        text-align: center
    }

    .twt-info p a {
        color: #98fdf4
    }

    .media:first-child {
        margin-top: 0
    }

    .media.usr-info > .pull-left {
        margin-right: 20px;
        margin-top: 10px
    }

    .media > .pull-left {
        margin-right: 10px
    }

    .pull-left {
        float: left
    }

    .pull-left {
        float: left !important
    }

    .custom-trq-footer {
        background: none repeat scroll 0 0 #4eb6b7 !important;
        box-shadow: 0 5px 0 #46a3a4;
        color: #fff;
        border-top: none
    }

    .panel-footer {
        padding: 10px 15px;
        background-color: #f5f5f5;
        border-top: 1px solid #ddd;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px
    }

    .usr-info .thumb {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        -webkit-border-radius: 50%
    }

    .usr-info img {
        vertical-align: middle
    }

    .usr-info h4 {
        color: #658585;
        margin-bottom: 0
    }

    .media-heading {
        margin: 0 0 5px
    }

    .usr-info .media-body span {
        color: #ea755c;
        font-size: 12px;
        margin-bottom: 20px;
        display: inline-block
    }

    .usr-info .media-body p {
        color: #b6bcbc
    }

    ul.user-states {
        list-style-type: none;
        padding: 20px 0
    }

    ul.user-states li {
        text-align: center;
        float: left;
        width: 33%;
        font-size: 18px;
        margin: 0
    }

    .statistics_list {
        width: 100%;
        overflow: auto;
    }

    .statistics_list .statistics {
        width: 200px;
        height: 180px;
        margin: 20px 1%;
        background: #FFFFFF;
        overflow: auto;
        float: left;
    }

    .statistics .title {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #AAAAAA;
        letter-spacing: 0;
        margin-left: 26px;
        margin-top: 29px;
    }

    .statistics .value {
        font-family: PingFangSC-Semibold;
        font-size: 28px;
        color: #666666;
        letter-spacing: 1px;
        margin-left: 26px;
        margin-top: 37px;
    }

    .statistics .rose {
        margin-left: 26px;
        margin-top: 6px;
    }

    .statistics .num_green {
        color: #1AB693;
    }
    .statistics .num_red {
        color: red;
    }

    .rose .up {
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #1AB693;
        border-top: 0px;
        display: inline-block;
        margin-bottom: 2px;
        margin-right: 5px;
    }

    .rose .down {
        width:0;
        height:0;
        border-width:6px 6px 0;
        border-style:solid;
        border-color:#F9485E transparent transparent;/*灰 透明 透明 */
        /*margin:40px auto;*/
        /*position:relative;*/
        /*background: #F9485E;*/
        /*width: 0;*/
        /*height: 0;*/
        /*border-left: 6px solid transparent;*/
        /*border-right: 6px solid transparent;*/
        /*border-bottom: 6px solid #1AB693;*/
        /*border-top: 0px;*/
        display: inline-block;
        margin-bottom: 2px;
        margin-right: 5px;
    }

    .statistics_list .statistics .explain {
        padding-top: 8px;
        clear: both;
        width: 100%;
        height: 40px;
    }

    .statistics_list .statistics .explain p {
        margin: 0;
        font-size: 11px;
        line-height: 20px;
        color: #bbb;
    }

    .statistics_list .statistics .left {
        float: left;
        height: 60px;
    }

    .statistics_list .statistics .left .number {
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 32px;
        color: #676767;
    }

    .statistics_list .statistics .left .title {
        font-size: 14px;
        color: #AAB5BC;
        font-weight: 600;
        height: 20px;
        line-height: 20px;
        text-align: center;
    }

    .statistics_list .statistics .icon {
        float: right;
        width: 60px;
        height: 60px;
        background: #666;
        color: #FFFFFF;
        line-height: 60px;
        font-size: 40px;
        text-align: center;
    }

    .statistics_list .statistics .icon i {
        font-size: 40px;
        line-height: 60px;
    }

    .title {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #666666;
        letter-spacing: 0;
    }

</style>
